<template>
	<view>
		<nav-bar title="项目预约" @goBack="goBack"></nav-bar>
		<scroll-view scroll-y :style="{ height: mainHeight }">
			<!-- <view class="top-bg"></view> -->
			<view class="dataList">
				<view class="dataList_title flexjsbac">
					<view class="box-line"></view>
					<view class="text">技师忙碌时间</view>
				</view>
				<view class="dataList_text">为保证您的服务质量，请您根据技师空闲时间段下单</view>
				<view style="width: 100%;">
					<view class="row-between" style="padding: 20upx;" v-for="(item, index) in Alltime" :key="index">
						<view style="font-size: 30upx;font-weight: 600;">{{ item.busyDate }}</view>
						<view class="row" style="width: 70%;">
							<view style="margin: 0 30upx 0upx 0;" v-for="(items, indexs) in item.busyTime"
								:key="indexs">
								{{ items }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="preview">
				<view class="title">
					<view class="box-line">
					</view>
					<view class="text">请选择服务开始时间</view>
				</view>
				<view style="margin: 30rpx 0;">
					<!-- :maxDate="1786778555000"-->
					<pickView v-model="dataTimer" mode="datetime" :minDate="nowTime" @change="change"
						:formatter="formatter"></pickView>
				</view>
			</view>
		</scroll-view>
		<bottom-order ref="bottomOrder" v-if="isShow" :chooseData="chooseProject" :transferData="transferData"
			:goodsList="goodsList" :goodsNumConfig="goodsNumConfig" @setNumConfig="setNumConfig"></bottom-order>
		<view class="btn_edit" v-else>
			<!-- <view class="btn_cont" v-if="isShow" @click="toReserve">
				下一步
			</view> -->
			<view class="btn_cont" style="background-color: #c7c5c5;color: #333;">
				下一步
			</view>
		</view>
		<!--
			@isTechnicianClick="FunisTechnicianClick"
			@cancelItem="cancelItem" -->

	</view>
</template>

<script>
	import NavBar from "@/components/nav-bar"
	import api_home from '@/api/home'
	import pickView from "@/components/pickerView/pickerView"
	import store from "@/store"
	import api_order from '@/api/order'
	import BottomOrder from './components/bottomOrder'
	export default {
		name: "chooseTime",
		components: {
			NavBar,
			pickView,
			BottomOrder
		},
		data() {
			return {
				transferData: {},
				data: {},
				dataTimer: Date.now(),
				chooseProject: {},
				Alltime: [],
				params: '',
				transferData: '',
				nowTime: Date.now(),
				advanceReservation: '',
				isShow: false,
				goodsNumConfig: {},
				goodsList: [],

			}
		},
		onLoad(option) {
			if (option.transferData) {
				this.transferData = JSON.parse(decodeURIComponent(option.transferData))
				this.getAlltime(this.transferData.id)
				this.getDetail(this.transferData.storeId)
			}
			if (option.chooseProject) {
				this.chooseProject = JSON.parse(decodeURIComponent(option.chooseProject))
				// this.toReserve()
			}
		},
		onShow() {
			if (!this.transferData) {
				const params = uni.getStorageSync('transferData')
				this.transferData = JSON.parse(decodeURIComponent(params))
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			// this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			change(e) {
				this.dataTimer = e.value
				this.getShowValue(this.dataTimer)
				// console.log("dataTimer", e.value);
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			async getAlltime(id) {
				const res = await api_order.getAlltiem({
					id: id
				})
				console.log('忙碌时间', res)
				this.Alltime = res.data
			},
			goBack() {
				const params = encodeURIComponent(JSON.stringify(this.transferData))
				uni.setStorageSync('transferData', params)
			},
			getDetail(id) {
				api_home.fetchShopDetail(id).then((res) => {
					const imgData = res.data.images.split(",")
					this.advanceReservation = res.data.advanceReservation
					this.getShowValue(this.nowTime)
					// console.log(this.advanceReservation, 'this.advanceReservation');
					// this.data = {
					// 	...res.data,
					// 	imgData
					// }
				})
			},
			getShowValue(data) {
				const date = new Date(data);
				const timestamp = date.getTime()
				const fiveDaysLater = this.nowTime + this.advanceReservation * 24 * 60 * 60 * 1000; // 目标日期后预约天的时间戳

				// 获取年、月、日、小时、分钟和秒
				var year = date.getFullYear();
				var month = ('0' + (date.getMonth() + 1)).slice(-2);
				var day = ('0' + date.getDate()).slice(-2);
				var hours = ('0' + date.getHours()).slice(-2);
				var minutes = ('0' + date.getMinutes()).slice(-2);

				const front = `${year}-${month}-${day}`
				const hide = `${hours}:${minutes}`
				if (timestamp > fiveDaysLater) {
					uni.showToast({
						title: '不能超出可预约天数' + this.advanceReservation + '天',
						icon: 'none'
					})
					this.isShow = false
				} else if (this.Alltime.length > 0) {
					// console.log(this.Alltime, '(this.Alltime')
					this.Alltime.map((item) => {
						if (front == item.busyDate) {
							// console.log(front, '(this.Alltime')
							const isRange = this.$methods.isTimeInRange(hide, item.busyTime)
							// console.log(isRange, 'isRange')
							if (isRange) {
								uni.showToast({
									icon: 'none',
									title: '请勿选择忙碌时间段'
								})
								this.isShow = false
							} else {
								this.isShow = true
								this.toReserve()
							}
						} else {
							this.isShow = true
							this.toReserve()
						}
					})
				} else {
					this.isShow = true
					this.toReserve()
				}
			},
			toReserve() {
				// 创建一个新的Date对象
				var date = new Date(this.dataTimer);

				// 获取年、月、日、小时、分钟和秒
				var year = date.getFullYear();
				var month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份是从0开始的，所以加1，并且前面补0
				var day = ('0' + date.getDate()).slice(-2); // 日前面补0
				var hours = ('0' + date.getHours()).slice(-2); // 小时前面补0
				var minutes = ('0' + date.getMinutes()).slice(-2); // 分钟前面补0
				var seconds = ('0' + date.getSeconds()).slice(-2); // 秒前面补0

				const front = `${year}-${month}-${day}`
				const reserveDate = `${year}/${month}/${day}`
				const hide = `${hours}:${minutes}`
				const subscribeStartTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
				const subscribeStartTimes = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`
				let chooseProject = [{
					...this.chooseProject[0],
					reserveDate: front,
					reserveTime: hide,
					subscribeStartTime: subscribeStartTime
				}]
				let transferData = {
					...this.transferData,
					reserveDate: front,
					reserveTime: hide,
				}
				
				// console.log(chooseProject, transferData, 'this.dataTimer229')
				const chooseTechnicianNumber = this.$store.getters.chooseTechnicianNumber
				this.$store.commit('TECHNICIAN_NUMBER', {
					...chooseTechnicianNumber,
					[transferData.id]: chooseTechnicianNumber[transferData.id] ?
						chooseTechnicianNumber[transferData.id] - 1 : 1
				})
				this.chooseProject = chooseProject
				this.transferData = transferData
				// console.log('this.Alltime', this.Alltime, this.chooseProject, this.transferData);
				this.getGoodsList()
				// return uni.navigateTo({
				// 	url: `/subPages/home/confirmOrder?chooseData=${encodeURIComponent(JSON.stringify(this.chooseProject))}&transferData=${encodeURIComponent(JSON.stringify(this.transferData))}&technician=technician`
				// })
			},
			// 附件商品数据
			getGoodsList() {
				const params = {
					storeId: this.transferData.storeId,
					status: 1,
					minproIsshow: 1
				}
				api_order.fetchAccessory(params).then((res) => {
					if (res.code !== 200) return
					this.goodsList = res.rows
					this.getGoodsConfig('technicianList')
				})
			},
			getGoodsConfig(dataNum) {
				this.goodsList.forEach(gItem => {
					const goodsNumStr = this.chooseProject[0].id + this.chooseProject[0].projectId + this.chooseProject[0]
						.subscribeStartTime.slice(0,
							this.chooseProject[0].subscribeStartTime.length - 3)
					this.goodsNumConfig[goodsNumStr] = this.goodsNumConfig[goodsNumStr] || {}
					this.goodsNumConfig = {
						...this.goodsNumConfig,
						[goodsNumStr]: {
							...this.goodsNumConfig[goodsNumStr],
							[gItem.id]: this.goodsNumConfig[goodsNumStr][gItem.id] ? this
								.goodsNumConfig[goodsNumStr][gItem.id] : 0
						}
					}
				})
			},
			setNumConfig(val) {
				this.goodsNumConfig = uni.$u.deepClone(val)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top-bg {
		width: 100%;
		height: 120rpx;
		opacity: 1;
		background: rgba(194, 126, 21, 1);
	}

	.dataList {
		margin-bottom: 30rpx;
		background: #fff;
		border-radius: 17rpx;
		margin: 0 38rpx;
		margin-top: 24rpx;


		.bottom_con {
			display: flex;
			justify-content: flex-end;
			padding: 24rpx;
		}

		.dataList_text {
			color: #b21416;
			padding: 0 24rpx 24rpx 24rpx;
			font-size: 26rpx;
		}

		.dataList_title {
			position: relative;
			width: 100%;
			font-size: 32rpx;
			font-weight: 600;
			letter-spacing: 0rpx;
			line-height: 46.34rpx;
			color: #333333;
			text-align: left;
			vertical-align: top;
			// border-bottom: 1px solid #E6E6E6;
			padding: 24rpx;
			border-radius: 17rpx;

			.box-line {
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 15rpx;
				height: 48rpx;
				opacity: 1;
				background: #c27e15;

			}

			.text {
				margin-left: 24rpx;
				font-size: 30rpx;
				font-weight: 600;
				display: flex;
				justify-content: space-between;

				.text-left {
					display: flex;
					align-items: center;

					.name {
						margin-right: 20rpx;
					}

					.room-item {
						margin-left: 20rpx;
						font-size: 22rpx;
						font-weight: 500;
						color: #808080;
					}
				}

				.text-right {
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}

	.preview {
		opacity: 1;
		border-radius: 17rpx;
		background: rgba(255, 255, 255, 1);
		margin: 0 38rpx;
		margin-top: 24rpx;
		padding: 26rpx 41rpx 34rpx 39rpx;

		.title {
			position: relative;
			width: 100%;
			margin-left: -39rpx;
			margin-bottom: 20rpx;

			.box-line {
				position: absolute;
				left: 0;
				top: 0;
				width: 15rpx;
				height: 48rpx;
				opacity: 1;
				background: rgba(194, 126, 21, 1);

			}

			.text {
				margin-left: 44rpx;
				font-size: 38rpx;
				font-weight: 500;
			}
		}

		.des {
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0rpx;
			line-height: 40.54rpx;
			color: rgba(51, 51, 51, 1);

		}

		.shop-img {
			display: flex;

			.img {
				width: 32%;
				height: 180rpx;
				border-radius: 11rpx 11rpx 11rpx 11rpx;
				opacity: 1;
				margin-right: 1%;

				.img-item {
					width: 100%;
					height: 100%;
					border-radius: 11rpx 11rpx 11rpx 11rpx;
				}
			}
		}

	}
</style>